<template>
  <div>
    <van-nav-bar title="我的订单" @click-left="leftButton" left-arrow />
    <van-search v-model="value" placeholder="商品名称/商品编号/订单号" />

    <van-tabs v-model="active">
      <van-tab title="待发货">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
            
            <van-card  v-for="item in list" :key="item" :title="item.spuName" :desc="item.spuNorms" 
              :num="item.merchantNum"
              :price="item.orderMoney"
              :thumb="item.normsImg"
            >
              <template #footer>
                <van-button size="mini">按钮</van-button>
                <van-button size="mini">按钮</van-button>
              </template>
            </van-card>
          </van-list>
        </van-pull-refresh>
      </van-tab>
      <van-tab title="待收货">
          <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
            
            <van-card  v-for="item in daiShouHuoList" :key="item"  :title="item.spuName" :desc="item.spuNorms" 
              :num="item.merchantNum"
              :price="item.orderMoney"
              :thumb="item.normsImg"
            >
              <template #footer>
                <van-button size="mini">按钮</van-button>
                <van-button size="mini">按钮</van-button>
              </template>
            </van-card>
          </van-list>
        </van-pull-refresh>
      </van-tab>
      <van-tab title="已完成">内容 3</van-tab>
      <van-tab title="售后">内容 4</van-tab>
      <van-tab title="全部订单">内容 4</van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  name: "OrderStatus",
  data() {
    return {
      value: "",
      active: 0,
      userId: 0,
      list: [],
      daiShouHuoList:[],
      loading: false,
      finished: false,
      refreshing: false
    };
  },
  created() {
    let listdata = this.$route.params.status;
    if (listdata != null) {
      this.userId = listdata;
      let num = parseInt(listdata);
      if (num == 1) {
        this.active = 0;
      } else if (num == 2 || num == 3) {
        this.active = 1;
      } else if (num == 4) {
        this.active = 2;
      } else if (num == 5) {
        this.active = 3;
      } else {
        this.active = 4;
      }
    }
    console.log(listdata);
  },
  methods: {
    /**
     * 回退
     */
    leftButton() {
      this.$router.back();
    },
    /**
     * 获取商品值
     */
    getList(){
        
    },
    /**
     * 加载list
     */
    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.list = [];
          this.refreshing = false;
        }

        
       
        this.loading = false;

        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    }
  }
};
</script>

<style scoped>
</style>
